<template>
  <fc-designer v-loading="loading" ref="designerDom" :config="{}">
    <template #handle>
      <el-button size="small" :icon="'Back'" plain round @click="goBack">返 回</el-button>
      <el-button size="small" :icon="'Promotion'" type="primary" plain round @click="saveForm"
        >保 存</el-button
      >
    </template>
  </fc-designer>
</template>
<script lang="ts">
import { defineComponent, onMounted, Ref, ref, toRefs } from 'vue';
import { ElMessageBox } from 'element-plus';
import { CommonResult, ResponseCodeEnum, useHttpClient } from 'pf-component';
import { systemApi } from '@/constants/api/system-api';
import { useNotice } from '@/components/element-plus/notice';
import router from '@/router';

export default defineComponent({
  name: 'FcDesignerWrapper',
  props: {
    formId: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const designerDom: Ref<any> = ref(null);
    const loading = ref(false);
    const initForm = () => {
      loading.value = true;
      useHttpClient()
        .general(systemApi.fcFormConfigApi.formInfo, {
          name: props.name
        })
        .then((res: CommonResult<any>) => {
          if (ResponseCodeEnum.SUCCESS === res.code) {
            designerDom.value.setRule(JSON.parse(res.data.rules));
            designerDom.value.setOption(JSON.parse(res.data.options));
          } else {
            useNotice().message.error(res.message);
          }
        })
        .finally(() => {
          loading.value = false;
        });
    };
    const saveForm = async () => {
      if (loading.value) return;

      // const json = designerDom.value.getJson();
      const rules = designerDom.value.getRule();
      const options = designerDom.value.getOption();
      if (!rules || !rules.length) {
        useNotice().message.warning('表单项为空！');
        return;
      }
      const params: any = {
        rules: JSON.stringify(rules),
        options: JSON.stringify(options)
      };
      if (props.formId) {
        params.name = props.name;
        params.formId = props.formId;
      } else {
        await ElMessageBox.prompt('请输入表单名称', '提示', {
          confirmButtonText: '',
          cancelButtonText: '',
          inputValidator: (value: string) => {
            if (!value) {
              return '表单名称不能为空';
            }
            return true;
          },
          inputErrorMessage: ''
        }).then(({ value }) => {
          params.name = value;
        });
      }
      loading.value = true;
      useHttpClient()
        .general(systemApi.fcFormConfigApi.createForm, undefined, params)
        .then(res => {
          if (res.code === ResponseCodeEnum.SUCCESS) {
            useNotice().message.success('操作成功');
          } else {
            useNotice().message.error(res.message);
          }
        })
        .finally(() => {
          loading.value = false;
        });
    };
    const goBack = () => {
      router.push({ path: '/page-config/form-designer-fc' });
    };
    onMounted(() => {
      if (props.formId) {
        initForm();
      }
    });
    return {
      loading,
      designerDom,
      saveForm,
      goBack
    };
  }
});
</script>
